.icon-display-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;

  .icon {
    box-sizing: border-box;

    width: 20%;
    padding: 1rem 0.5rem;
    border-radius: 0.375rem;

    text-align: center;

    @media (max-width: hope-config.$tablet) {
      width: 25%;
    }

    @media (max-width: hope-config.$mobile) {
      width: 33.333%;
    }

    &:hover {
      background: var(--bg-color-light);
      cursor: pointer;
    }

    .iconfont {
      color: var(--dark-grey);
      font-size: 2rem;
    }

    .text {
      margin-top: 10px;
      font-size: 14px;
    }
  }
}
